<template>
	<div class="formdata">
		<div class="title">{{ $t('ivcs.enquiryForm') }}</div>
		<div class="inputs">
			<Form :model="form" label-position="left">
				<div class="form-search">
					<FormItem :label="$t('formDataList.sessionId')" style="width:248px" class="formitem">
						<Input v-model="form.sessionId" :placeholder="$t('formDataList.pleaseEnterSessionId')"></Input>
					</FormItem>
					<FormItem :label="$t('formDataList.formName')" style="width:248px;margin-left: 16px;">
						<Select v-model="form.formName" class="select-label" :placeholder="$t('formDataList.pleaseSelectFormName')">
							<Option v-for="item in selectFormName" :value="item.label" :key="item.value">{{ item.label }}</Option>
						</Select>
					</FormItem>
					<FormItem :label="$t('formDataList.formNumber')" style="width:248px;margin-left: 16px;">
						<Input v-model="form.formNumber" :placeholder="$t('formDataList.pleaseEnterFormNumber')"></Input>
					</FormItem>
					<FormItem :label="$t('formDataList.formState')" style="width:248px;margin-left: 16px;">
						<Select v-model="form.formStatus" class="select-label" :placeholder="$t('formDataList.pleaseSelectFormState')">
							<Option v-for="item in selectFormState" :value="item.value" :key="item.value">{{ item.label }}</Option>
						</Select>
					</FormItem>
				</div>
				<div class="form-search">
					<FormItem :label="$t('formDataList.clientId')" style="width:248px;">
						<Input v-model="form.clientId" :placeholder="$t('formDataList.pleaseEnterClientId')"></Input>
					</FormItem>
					<FormItem :label="$t('formDataList.pushTime')" style="width:248px;margin-left: 16px;">
						<DatePicker type="daterange" v-model="form.pushTime" format="yyyy-MM-dd HH:mm" placement="bottom-end" :placeholder="$t('formDataList.pleaseSelectPushTime')"></DatePicker>
					</FormItem>
					<FormItem :label="$t('formDataList.getTime')" style="width:248px;margin-left: 16px;"> <DatePicker type="daterange" format="yyyy-MM-dd HH:mm" v-model="form.getTime" placement="bottom-end" :placeholder="$t('formDataList.pleaseSelectGetTime')"></DatePicker> </FormItem>
					<FormItem>
						<Button class="btn-search" @click="searchData">{{ $t('ivcs.retrieval') }}</Button>
					</FormItem>
				</div>
			</Form>
		</div>

		<div class="btn">
			<Button type="primary" class="btn-excel">{{ $t('formDataList.exportExcel') }}</Button>
		</div>
		<div class="table">
			<Table ref="selection" :columns="formListTable" :data="formData" class="table-list" @on-select="select">
				<template slot-scope="scope" slot="action">
					<Button type="primary" v-if="scope.row.status === 'success'" size="small" @click="show(scope.$index, scope.row)">{{ $t('formDataList.see') }}</Button>
				</template>
			</Table>
		</div>
		<div class="page">
			<Page :total="this.formListPage.pages.total" show-total :page-size="pageSize" @on-change="handlePage" />
		</div>
		<FormInfo v-if="showFormInfo" @cancel="cancelFormInfo" :showFormInfo="showFormInfo" :followId="followId" :formId="formId"></FormInfo>
	</div>
</template>
<script>
import { getFormDataList, getFormDetail, getAllFormName } from '../../api/api';
import FormInfo from '../Toast/FormInfo.vue';
export default {
	props: {
		customerCallbizScenarioId: {
			type: Number,
			required: true,
			default: () => 0
		}
	},
	components: {
		FormInfo
	},
	data() {
		return {
			showFormInfo: false, //表单弹窗状态
			followId: '', //表单流水号
			formId: 0, // 表单id
			//表头
			formListTable: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: this.$t('formDataList.sessionId'),
					align: 'center',
					key: 'sessionId'
				},
				{
					title: this.$t('formDataList.formName'),
					align: 'center',
					key: 'formName'
				},
				{
					title: this.$t('formDataList.formNumber'),
					align: 'center',
					key: 'formNumber'
				},
				{
					title: this.$t('formDataList.clientId'),
					align: 'center',
					key: 'clientId'
				},
				{
					title: this.$t('formDataList.pushTime'),
					align: 'center',
					key: 'pushTime'
				},
				{
					title: this.$t('formDataList.getTime'),
					align: 'center',
					key: 'getTime'
				},
				{
					title: this.$t('formDataList.formState'),
					align: 'center',
					key: 'formStatus'
				},
				{
					title: this.$t('formDataList.operation'),
					slot: 'action',
					width: 150,
					align: 'center'
				}
			],
			pageSize: 10,
			//表单数据
			formData: [],
			//input输入框默认值
			form: {
				sessionId: '',
				formNumber: '',
				clientId: '',
				formName: '',
				formStatus: '',
				pushTime: '',
				getTime: ''
			},
			//表单页码
			formListPage: {
				sessionId: '',
				followId: '',
				toClientId: '',
				pushStartTime: '',
				pushEndTime: '',
				submitStartTime: '',
				submitEndTime: '',
				name: '',
				status: '',
				pages: { page: 1, pageSize: 10, total: 0 }
			},
			//表单名称下拉列表
			selectFormName: [],
			//表单状态下拉列表
			selectFormState: [
				{
					value: 'success',
					label: this.$t('formDataList.sumbitSuccess')
				},
				{
					value: 'fail',
					label: this.$t('formDataList.sumbitError')
				},
				{
					value: 'timeout',
					label: this.$t('formDataList.sumbitTimeOut')
				}
			]
		};
	},
	created() {},
	mounted() {
		if (this.$store.state.token) {
			this.getFormDataList();
			this.getAllFormName();
		}
	},
	methods: {
		cancelFormInfo() {
			this.showFormInfo = false;
		},
		//勾选
		select(row, index) {
			console.log(row, index);
		},
		//查看
		show(index, row) {
			console.log(index, row);
			this.$store.state.formDataId = row.sumbitSendForm;
			this.getFormDetail(row.sumbitSendForm);
		},
		//分页
		handlePage(val) {
			this.formListPage.pages.page = val;
			this.getFormDataList();
		},
		//获取表单详情
		getFormDetail(id) {
			getFormDetail(id)
				.then(res => {
					if (res.status === 200) {
						this.followId = res.data.data.followId;
						this.formId = res.data.data.id;
						this.showFormInfo = true;
					} else {
						console.log('获取表单详情失败');
						this.$message.error(this.$t('formDataList.getFormDetailError'));
					}
				})
				.catch(err => {
					console.log(err);
					this.$message.error(this.$t('formDataList.getFormDetailError'));
				});
		},

		//获取所有的表单名称
		async getAllFormName() {
			try {
				let data = await getAllFormName();
				console.log(data.data.data.data);
				let allFormName = data.data.data.data;
				allFormName.forEach(item => {
					this.selectFormName.push({ value: item.name, label: item.name });
				});
			} catch (e) {
				console.log(e);
				this.$message.error('获取表单名称失败');
			}
		},
		//检索
		async searchData() {
			this.getFormDataList();
		},
		async getFormDataList() {
			if (this.form.pushTime.length > 0) {
				this.form.pushTime[0] = this.form.pushTime[0] ? this.$moment(this.form.pushTime[0]).toISOString() : '';
				this.form.pushTime[1] = this.form.pushTime[1] ? this.$moment(this.form.pushTime[1]).toISOString() : '';
			} else {
				this.form.pushTime = '';
			}
			if (this.form.getTime.length > 0) {
				this.form.getTime[0] = this.form.getTime[0] ? this.$moment(this.form.getTime[0]).toISOString() : '';
				this.form.getTime[1] = this.form.getTime[1] ? this.$moment(this.form.getTime[1]).toISOString() : '';
			} else {
				this.form.getTime = '';
			}
			let data = {
				page: this.formListPage.pages.page,
				pageSize: this.formListPage.pages.pageSize,
				sessionId: this.form.sessionId ? this.form.sessionId : '',
				followId: this.form.formNumber ? this.form.formNumber : '',
				customerName: this.form.clientId ? this.form.clientId : '',
				fromClientId: '',
				name: this.form.formName ? this.form.formName : '',
				status: this.form.formStatus ? this.form.formStatus : '',
				pushStartTime: this.form.pushTime[0] ? this.form.pushTime[0] : '',
				pushEndTime: this.form.pushTime[1] ? this.form.pushTime[1] : '',
				submitStartTime: this.form.getTime[0] ? this.form.getTime[0] : '',
				submitEndTime: this.form.getTime[1] ? this.form.getTime[1] : ''
			};

			try {
				let formDataList = await getFormDataList(data);
				console.log(formDataList);
				this.formListPage.pages.total = formDataList.data.data.count;
				this.formData = formDataList.data.data.data.map(item => {
					return {
						sessionId: item.sessionId || '',
						formName: item.formTemplate.name || '',
						formNumber: item.followId || '',
						clientId: item.toClient.toClientUserName || '',
						pushTime: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss') || '',
						getTime: item.submitAt ? this.$moment(item.submitAt).format('YYYY-MM-DD HH:mm:ss') : '-',
						formStatus: item.status === 'success' ? '提交成功' : item.status === 'fail' ? '提交失败' : item.status === 'timeout' ? '提交超时' : '-',
						status: item.status,
						sumbitSendForm: item.id || ''
					};
				});
				//禁用提交不成功的数据
				for (let i = 0; i < this.formData.length; i++) {
					if (!this.formData[i].status || this.formData[i].status !== 'success') {
						this.formData[i]._disabled = true;
					}
				}
			} catch (e) {
				console.log(e);
			}
		}
	}
};
</script>
<style scoped>
.btn-search {
	margin-top: 31px;
	width: 72px;
	height: 32px;
	border: 1px solid #6384fe;
	border-radius: 2px;
	margin-left: 16px;
	font-size: 14px;
	border-radius: 4px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6384fe;
	line-height: 18px;
	cursor: pointer;
}
.btn-search:hover {
	background: #6384fe;
	color: #ffffff;
}
.formdata .page {
	display: flex;
	margin-top: 30px;
	float: right;
}
.formdata .table .ivu-table-wrapper {
	border-radius: 4px;
}
.formdata .table {
	margin-top: 18px;
}
.formdata .btn .btn-excel {
	display: flex;
}
.title {
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	text-align: left;
	margin-bottom: 23px;
}
.formdata {
	width: 98%;
	height: 96%;
	margin: 0 auto;
	margin-top: 18px;
	background: #ffffff;
	padding: 20px;
}
.inputs {
	display: flex;
}
.formdata .inputs .form-search {
	display: flex;
}
.formdata .inputs .ivu-form {
	width: 100%;
}
.formdata .inputs .ivu-form .ivu-form-item .ivu-form-item-content .ivu-date-picker {
	display: block;
}
</style>
<style>
.table-list thead .ivu-table-cell-with-selection {
	display: none;
}
.select-label .ivu-select-placeholder {
	text-align: left;
}
.datePicker .ivu-picker-panel-body {
	width: 250px;
	padding: 14px;
}
</style>
